[CSS] Zastąpienie obrazka

Tworząc alternatywny styl dla strony której wygląd próbuje lekko zmodyfikować napotkałem na pewien problem i zastanawiam się czy stosując css jest jakieś sensowne rozwiązanie. Otóż czy da się zastąpić obrazek zawarty w takim kodzie na stronie obrazkiem z zewnętrznego serwera przy pomocy css:

<img title="" alt="obrazek" class="logo" src="obrazek.png">

Myślałem o zastosowaniu background-image i ukryciu w jakiś sposób obrazka zawartego w img. Czy jest to możliwe ?

edit:

Spróbuje troche jasniej ;-) Korzystając ze Stylish wprowadzam własne modyfikacje wyglądu stronki. I teraz się zastanawiam czy za pomocą samego css (bez ingerencji w kod strony) jestem w stanie "zakryć" obrazek znajdujący się w kodzie powyżej i w jego miejscu wstawić własny z zewnętrznego serwera.

2 lata, 3 miesiące temu | edytowane przez: Inquistor 431

Odpowiedz na pytanie

0

Odpowiedzi: 4

  • 2 lata, 3 miesiące temu
    autor: lqc

    3

    Nie da się zastąpić wartości src za pomocą CSS2, bo style modyfikują wygląd elementów, a nie same elementy. Nie możesz dodawać, ani usuwać elementów. Możesz je ukryć, ale nie da się ich zastąpić.

    Natomiast na stronie Stylish, można znaleźć taki prosty hack:

    img.logo {
    /* zerujemy wielkość obrazka, tak aby był niewidoczny */
    height: 0 !important; 
    width: 0 !important;
    /* ale te wielkości nie uwzględniają wyrównania, więc podajemy takie
       jak wielkość nowego obrazka */
    padding-left: 125px !important;
    padding-top: 25px !important;
    /* ustawiamy nowy obrazek w tle */
    background: url(http://example.com/your/image/here) no-repeat !important;
}

  • 2 lata, 3 miesiące temu
    autor: t4keda

    4

    obrazek masz normalnie w kodzie jako element, więc może używając :before ? Wiem, że w wypadku tekstu to działa. IE7 tego raczej nie obsługuje (mi nie działa)

    img.logo{
    overflow: hidden;
    width: 350px;
    height: 125px;
}

img.logo:before{
    content: url('logo.png');
}

  • 2 lata, 3 miesiące temu
    autor: kijekk

    0

    obrazek możesz ukryć stylami

    style="display:none;"

  • 2 lata, 3 miesiące temu
    autor: rzientek

    0

    Ja mam taki myk, że ustawiasz sobie display:block i poprostu padding-top oddalasz całkowicie obrazek od góry a odsłania się tło:

    .logo {
    background:url(img/herb2.png);
    display:block;
    padding-top:100px;
    padding-left:75px;
    height: 0 !important; 
    width: 0 !important;
}

    No i powinno zadziałać ;]

Zaloguj się, aby dodać swoją odpowiedź